import React from 'react';
import { Button } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import DcDrop from '@/pages/dnd/right/DcDrop';
import List from '@/pages/dnd/right/list';

const divStyle = {
  width: '100%',
  padding: '10px',
  color: '#666',
  height: 'auto',
  border: '1px solid #333',
};

function Page(props: any) {
  const { data, move } = props;
  return (
    <div style={divStyle}>
      <div>page</div>
      <DcDrop data={data} insert={true}>
        {data.items.length > 0 ? (
          <List items={data.items} move={move} />
        ) : (
          <div>来吧</div>
        )}
      </DcDrop>
    </div>
  );
}

function View(props: any) {
  const { data, move } = props;
  return (
    <div style={divStyle} className={props.className}>
      这个是一个title
      <DcDrop data={data} insert={true}>
        <List items={data.items} move={move} />
      </DcDrop>
    </div>
  );
}

function Text(props: any) {
  return <div>一段纯文本，不可以拖入其他元素</div>;
}

function Button1(props: any) {
  return <Button type="primary">OK</Button>;
}

function Icon1() {
  return <QuestionCircleOutlined />;
}

export default {
  Page,
  View,
  Text,
  Button: Button1,
  Icon: Icon1,
};
